<script lang="ts" setup>
import { computed } from 'vue';
import { Descriptions, DescriptionsItem, Table, Divider } from 'ant-design-vue';

const props = defineProps<{
  orderInfo: {
    customerName: string;
    customerPhone: string;
    weddingDate: string;
  };
  services: {
    dresses: any[];
    artists: any[];
    photographers: any[];
  };
}>();

const serviceItems = computed(() => {
  const items: any[] = [];
  
  props.services.dresses.forEach(dress => {
    items.push({
      type: '婚纱',
      name: dress.dressName,
      code: dress.dressCode,
      price: dress.rentalPrice,
      quantity: 1,
      subtotal: dress.rentalPrice,
    });
  });
  
  props.services.artists.forEach(artist => {
    items.push({
      type: '化妆服务',
      name: artist.artistName,
      code: artist.artistCode,
      price: artist.servicePrice,
      quantity: 1,
      subtotal: artist.servicePrice,
    });
  });
  
  props.services.photographers.forEach(photographer => {
    items.push({
      type: '摄影服务',
      name: photographer.photographerName,
      code: photographer.photographerCode,
      price: photographer.servicePrice,
      quantity: 1,
      subtotal: photographer.servicePrice,
    });
  });
  
  return items;
});

const totalAmount = computed(() => {
  return serviceItems.value.reduce((sum, item) => sum + item.subtotal, 0);
});

const columns = [
  { title: '服务类型', dataIndex: 'type', key: 'type', width: 120 },
  { title: '服务名称', dataIndex: 'name', key: 'name' },
  { title: '服务编号', dataIndex: 'code', key: 'code', width: 140 },
  { title: '单价', dataIndex: 'price', key: 'price', width: 120 },
  { title: '数量', dataIndex: 'quantity', key: 'quantity', width: 80 },
  { title: '小计', dataIndex: 'subtotal', key: 'subtotal', width: 120 },
];
</script>

<template>
  <div>
    <div class="text-lg font-bold mb-4">订单确认</div>
    
    <Descriptions bordered :column="2" class="mb-6">
      <DescriptionsItem label="客户姓名">
        {{ orderInfo.customerName }}
      </DescriptionsItem>
      <DescriptionsItem label="客户电话">
        {{ orderInfo.customerPhone }}
      </DescriptionsItem>
      <DescriptionsItem label="婚期" :span="2">
        {{ orderInfo.weddingDate }}
      </DescriptionsItem>
    </Descriptions>

    <Divider>服务项目</Divider>

    <Table
      :dataSource="serviceItems"
      :columns="columns"
      :pagination="false"
      size="small"
      class="mb-6"
    />

    <div class="flex justify-end">
      <div class="w-80 bg-gray-50 p-4 rounded">
        <div class="flex justify-between mb-2">
          <span>服务项数量：</span>
          <span class="font-medium">{{ serviceItems.length }} 项</span>
        </div>
        <div class="flex justify-between mb-2">
          <span>优惠金额：</span>
          <span class="text-green-600">¥0.00</span>
        </div>
        <Divider class="my-3" />
        <div class="flex justify-between">
          <span class="text-lg font-bold">订单总额：</span>
          <span class="text-red-500 text-2xl font-bold">¥{{ totalAmount.toFixed(2) }}</span>
        </div>
      </div>
    </div>

    <div class="mt-6 p-4 bg-blue-50 rounded">
      <div class="text-sm text-gray-600">
        <div class="mb-2">温馨提示：</div>
        <ul class="list-disc list-inside space-y-1">
          <li>请仔细核对订单信息，确认无误后提交</li>
          <li>订单提交后，我们将为您预留相关服务资源</li>
          <li>如需修改订单，请联系客服人员</li>
        </ul>
      </div>
    </div>
  </div>
</template>

